<template>
    <view>
        <!-- pages/dyyq/dyyq.wxml -->
        <view class="dy_bz">
            <view>①抖音验券</view>
            <image class="dy_bz_tp" src="/static/pages/img/下一步.png"></image>
            <view>②选择桌台</view>
            <image class="dy_bz_tp" src="/static/pages/img/下一步.png"></image>
            <view>③选择时间</view>
        </view>

        <view class="page">
            <view class="dyyq_kk">
                <!-- 抖音图标 -->
                <image class="dyyq_tp" src="/static/pages/img/抖音yq.png"></image>
            </view>

            <view class="dyyq_ss">
                <input class="input_md" type="text" placeholder="请输入抖音券码" v-model:value="douyin.code"/>
                <image class="dyyq_sm" src="/static/pages/img/扫码.png" @tap="saoma()"></image>
            </view>

            <view class="dyyq_xyb" @click="verdouyin()">下一步</view>

            <view class="dyyq_ff">
                <view class="dyyq_h1">抖音验券使用方法</view>
                <view class="dyyq_text">步骤一：输入抖音验券码兑换抖音券</view>
                <view class="dyyq_text">步骤二：完成验券后，点击立即使用前往选择桌台</view>
                <view class="dyyq_text">步骤三：选好桌台后，选择需要预定的时间段</view>
                <view class="dyyq_text">步骤四：付款时选择要使用的卡券</view>
            </view>
        </view>
    </view>
</template>

<script>
// pages/dyyq/dyyq.js
import {verifyTicket} from "@/common/api";

export default {
    data() {
        return {
          douyin: {
            code: ''
          }
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
      saoma(){
        let _this=this
        // 只允许通过相机扫码
        uni.scanCode({
          onlyFromCamera: true,
          success: function (res) {
            console.log('条码类型：' + res.scanType);
            console.log('条码内容：' + res.result);
            _this.yanquasan(res.result)
          }
        });
      },
      yanquasan(code){
        verifyTicket({
          code: code
        }, res => {
          if (res.data.code==0){
            this.douyin.code = ''
            console.log('verifyTicket', res)
            this.showModal2=false
            uni.navigateTo({url:"/packageA/wodedingdan/wodedingdan"})
          }else {
            uni.showModal({
              title: res.data.msg,
              showCancel:false,
              icon: 'none',    //如果要纯文本，不要icon，将值设为'none'
              duration: 2000    //持续时间为 2秒
            })
          }

        })
      },
      //抖音验券
      verdouyin() {
        if (!this.douyin.code.trim()) {
          uni.showModal({
            title: '请填写券码',
            showCancel:false,
            icon: 'none',    //如果要纯文本，不要icon，将值设为'none'
            duration: 2000    //持续时间为 2秒
          })
          return
        }
        this.yanquasan(this.douyin.code)
      },
    }
};
</script>
<style>
.dy_bz {
    display: flex; /* 使用Flexbox布局 */
    justify-content: space-between; /* 子元素之间平均分布在容器中 */
    margin: 30rpx 30rpx 70rpx 30rpx;
    font-weight: bold;
}

.dy_bz_tp {
    width: 50rpx;
    height: 50rpx;
}

.page {
    width: 100%;
    height: 90vh;
    background-color: rgb(231, 231, 231);
}

.dyyq_tp {
    margin: 140rpx 0 0 350rpx;
    width: 110rpx;
    height: 110rpx;
}
.dyyq_ss {
    margin: 80rpx 30rpx 0 30rpx;
    padding: 0 30rpx 0 30rpx;
    height: 110rpx;
    background-color: rgb(255, 255, 255);
    border-radius: 12rpx; /* 设置边框圆角 */
    display: flex; /* 使用Flexbox布局 */
    justify-content: space-between;
    align-items: center; /* 垂直居中 */
    justify-content: space-between; /* 子元素之间平均分布在容器中 */
}
.dyyq_sm {
    width: 50rpx;
    height: 50rpx;
}

.dyyq_xyb {
    margin: 80rpx 30rpx 0 30rpx;
    padding: 0 290rpx 0 290rpx;
    height: 110rpx;
    background-color: rgb(73, 70, 70);
    border-radius: 12rpx; /* 设置边框圆角 */
    display: flex; /* 使用Flexbox布局 */
    justify-content: space-between;
    align-items: center; /* 垂直居中 */
    color: rgb(255, 255, 255);
}

.dyyq_ff {
    margin: 80rpx 30rpx 0 30rpx;
    padding: 60rpx 0 60rpx 30rpx;
    border: 1rpx solid rgb(73, 70, 70);
    border-radius: 12rpx; /* 设置边框圆角 */
}

.dyyq_h1 {
    font-weight: bold; /* 设置字体加粗 */
    margin: 0 0 40rpx 0;
}

.dyyq_text {
    font-size: 15px;
    line-height: 2;
    color: rgb(110, 108, 108);
}
</style>
